<template>
	<view class="container">
		<view class="tabs_box">
			<u-tabs :list="tabs" :scrollable="false" @click="changeTabs"></u-tabs>
		</view>

		<!-- 優惠券列表 -->
		<view v-if="tabsText=='優惠券'" class="">
			<scroll-view @scrolltolower="scroll" v-if="couponsList.length" scroll-y="true" class="scroll-y">
				<view v-for="item in couponsList" :key="item.id" class="coupons_item">
					<view class="top">
						<view class="title">{{item.title}}</view>
						<view class="min">滿 <text style="color: #ff914d;">{{item.min}}</text> 可用</view>
					</view>
					<view class="bottom">
						<view class="money">${{item.money}}</view>
						<view class="date">有效期至 <text>{{setDate(item.expire_time)}}</text> </view>
					</view>
					<view class="limitation">
						<view class="limitation_item">預約：<text
								style="color: #ff914d;">{{item.is_order == 1 ? '可用' : '不可用'}}</text>
						</view>
						<view class="limitation_item">續單：<text
								style="color: #ff914d;">{{item.is_continuation_order == 1 ? '可用' : '不可用'}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view v-else style="margin: 30rpx;text-align: center;">暫無優惠券</view>
		</view>

		<!-- 電子票券列表 -->
		<view v-if="tabsText=='電子票券'" class="">
			<scroll-view @scrolltolower="scroll" v-if="ticketList.length" scroll-y="true" class="scroll-y">
				<view @click="toUse(item)" v-for="item in ticketList" :key="item.id" class="ticket_item">
					<view class="top">
						<view class="title">{{item.title}}</view>
						<view class="min">可用<text style="margin: 0 10rpx;"
								:style="{color:item.remaining_times > 0 ? '#39B19D' :'#ff914d'}">{{item.remaining_times}}</text>
							次</view>
					</view>
					<view class="bottom">
						<view class="money">${{item.money}}</view>
						<view class="date">有效期至 <text>{{setDate(item.expire_time)}}</text> </view>
					</view>
					<view class="limitation">
						<view class="limitation_item">預約：<text
								style="color: #39B19D;">{{item.is_order == 1 ? '可用' : '不可用'}}</text>
						</view>
						<view class="limitation_item">續單：<text
								style="color: #39B19D;">{{item.is_continuation_order == 1 ? '可用' : '不可用'}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view v-else style="margin: 30rpx;text-align: center;">暫無電子票券</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreCoupons
	} from '@/api/me.js'
	export default {
		data() {
			return {
				all: [], // 所有卡券列表
				couponsList: [],
				ticketList: [],
				tabs: [{
						name: '優惠券'
					},
					{
						name: '電子票券'
					},
				],
				store_id: '',
				page: 1,
				flag: true,
				tabsText: '優惠券',
			};
		},
		onLoad(options) {
			this.store_id = options.store_id
			this.getAllCoupons(1)
		},
		methods: {
			getAllCoupons(page) {
				const params = {
					store_id: this.store_id,
					page,
					size: 10,
				}
				getStoreCoupons(params).then(res => {
					if (!res.data.length) {
						this.flag = false
					}
					if (page > 1) {
						this.all = this.all.concat(res.data)
					} else {
						this.all = res.data
					}
					this.couponsList = this.all.filter(item => item.type_id == 1)
					this.ticketList = this.all.filter(item => item.type_id == 2)
				})
			},
			setDate(date) {
				let time = new Date(date * 1000)
				let y = time.getFullYear()
				let m = time.getMonth() + 1
				let d = time.getDate()
				m = m > 9 ? m : '0' + m
				d = d > 9 ? d : '0' + d
				return `${y}-${m}-${d}`
			},
			changeTabs(e) {
				// console.log(e)
				this.tabsText = e.name
			},
			scroll() {
				if (this.flag) {
					this.getAllCoupons(++this.page)
				}
			},
			toUse(item) {
				this.$store.commit('updateTicketInfo', item)
				if (item.is_order === 1 && item.remaining_times > 0) {
					uni.navigateTo({
						url: `/pages/electronic_ticket_roll/ticket_roll_select_box/ticket_roll_select_box`
					})
				} else {
					uni.showToast({
						title: '該卡券不可使用',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #f7f7f7;

		.scroll-y {
			height: 85vh;
			// background-color: skyblue;
			margin-top: 10rpx;

			.coupons_item,
			.ticket_item {
				background-color: #fff;
				padding: 10rpx 20rpx;
				border-radius: 15rpx;
				margin-bottom: 20rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #ccc4;

					.title {
						font-size: 32rpx;
						display: flex;
						align-items: center;

						&::before {
							content: '';
							width: 6rpx;
							height: 30rpx;
							background-color: #ff914d;
							display: inline-block;
							margin-right: 10rpx;
						}
					}
				}

				.bottom {
					margin: 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.money {
						color: #ff914d;
						font-size: 36rpx;
						font-weight: 600;
					}
				}

				.limitation {
					display: flex;
					justify-content: space-between;

					.limitation_item {
						// margin-right: 20rpx;
					}
				}
			}

			.ticket_item {
				.top {
					.title {
						&::before {
							background-color: #39B19D;
						}
					}
				}

				.bottom {
					.money {
						color: #39B19D;
					}
				}
			}
		}
	}
</style>